// 使用高阶组件封装：鼠标位置的效果
// 步骤：
// 1. 创建一个函数，名称约定以 with 开头 
// 2. 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
// 3. 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回 
// 4. 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
// 5. 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件,并将其渲染到页面中 
import React, { Component } from 'react';
import './cursor.css'
const withMouse = (WrapperedComponent) => {
  return class extends Component {
    // 数据层：复用的状态
    // 设置状态数据：
    state = {
      x: 0,
      y: 0
    }

    // 处理鼠标位置信息
    handlerPos = (e) => {
      // console.log(e);
      // 做响应式
      this.setState({
        x: e.x,
        y: e.y
      })
    }

    //事件：mousemove
    componentDidMount() {
      window.addEventListener('mousemove', this.handlerPos)
    }


    // 解绑事件
    componentWillUnmount() {
      window.removeEventListener('mousemove', this.handlerPos)
    }

    // 渲染
    render() {
      return <WrapperedComponent {...this.state} {...this.props} />
    }
  }
}

// 调用
// 被包装/增强
const Fnc = (props) => {
  console.log(props)
  const { x, y } = props;
  return (
    <div>
      <h1>鼠标位置：{x + ':' + y}</h1>
    </div>
  )
}

const NewCom = withMouse(Fnc)

class App extends Component {
  render() {
    return (
      <div>
        <h1>高阶组件用法</h1>
        <NewCom a={10} />
      </div>
    );
  }
}

export default App
